<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>限制DOM访问、限制Cookie访问、限制AJAX获取数据（但不限制发送数据）</title>
    <script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body>

<div>
    <button onclick="domAndCookie()">DOM、Cookie访问</button>
    <br>
    <iframe id="framePage" src="http://localhost:8080/framePage.html" height="80px"></iframe>
    <div id="resp-dom"></div>
</div>
<hr>
<div>
    <button onclick="ajax('/WebServlet')">AJAX-简单请求-WebServlet</button>
    <button onclick="ajax('/CrossOrigin')">AJAX-简单请求-SpringMvc</button>
    <br>
    <button onclick="ajax('/WebServlet', 'complex')">AJAX-复杂请求-WebServlet</button>
    <button onclick="ajax('/CrossOrigin', 'complex')">AJAX-复杂请求-SpringMvc</button>
    <br>
    <div id="resp-data" style="border:solid black thin; width: 300px; min-height: 50px"></div>
</div>

</body>
<script type="text/javascript">
    function domAndCookie() {
        const framePage = document.getElementById('framePage')
        let dom = framePage.contentWindow.document              //同源的可以获取，非同源的无法获取
        // let cookie = dom.cookie                              //同源的可以获取，非同源的无法获取。document都被限制了，document.cookie自然也被限制了
        console.log(dom)
        $("#resp-dom").text(dom.body.innerHTML + ' @ ' + dom.cookie)
    }

    function ajax(path, type) {
        let url = "http://localhost:8080/ajax" + path;
        // let url = "http://localhost:58080/ajax" + path;  // 测试 nginx
        let method = 'complex' == type ? "PUT" : "GET";                                     // 改请求方法变成复杂请求
        let headers = 'complex' == type ? {"My-Name": "lishuoboy", "My-Age": "18"} : null;  // 添加请求头变成复杂请求
        /*
        data         表示发送给服务器的数据。格式有两种:
                        一: name=value&name=value
                        二: {key:value}
        dataType     响应的数据类型。常用的数据类型有:json表示json对象、text、xml
        */
        $.ajax({
            url: url,
            data: {"name": "ZhangSan"},
            type: method,                                   // 请求方法（method）为GET、HEAD、POST是简单请求的必要条件之一
            headers: headers,                               // 简记：只要手动修改请求头，一般都是复杂请求。
            success: function (data) {
                $("#resp-data").text(data)
                console.log(data)
            },
            dataType: "text"
        })
    }
</script>
</html>